<template>
	<view>
	<view class="container">
		<unicloud-db ref="DeltaUdb" 
		v-slot:default="{data, loading, error, options}" 
		:options="options" :collection="collectionList"
		 getone loadtime="manual">
			<!-- :collection="collectionList" :getone="true"  loadtime="manual"  > -->
			<view v-if="error">{{error.message}}</view>
			<view v-else-if="loading">
				<uni-load-more :contentText="loadMore" status="loading"></uni-load-more>
			</view>
			<view v-else-if="data">
				<view>
					<uni-title type="h2" align="center" :title="data.title"></uni-title>
				</view>
				<view class="art-content">
					<!-- content_images -->
					<uv-parse :content="delta2html(data.content)" :selectable="true"></uv-parse>
					<!-- <rich-text  :nodes="delta2html(data.content)"></rich-text> -->
				</view>
				<view class="date_r">
					（{{data.user_id[0].nickname}}{{$u.date(data.last_modify_date,'yyyy/mm/dd')}}发布）
					<!-- <uni-dateformat 
					format="(`${data.user_id[0].nickname} `at yyyy/MM/dd)"
					:date="data.last_modify_date"></uni-dateformat> -->
				</view>
			</view>
		</unicloud-db>
		<!--    <view class="btns">
      <button type="primary" @click="handleUpdate">修改</button>
      <button type="warn" class="btn-delete" @click="handleDelete">删除</button>
    </view> -->
	</view>
	<xasa-foot size="12"></xasa-foot>
	</view>
</template>

<script>
	// 由schema2code生成，包含校验规则和enum静态数据
	//import type Delta from 'quill-delta';
	//import { ref } from 'vue';
	import { Delta } from 'quill-delta-converter/dist/types';
	import { DeltaConverter } from 'quill-delta-converter';
	import { enumConverter } from '@/js_sdk/validator/uni-cms-articles.js';
	
	const db = uniCloud.databaseForJQL();
	const T1 = 'xasa-example';
	const T2 = 'xasa-categories';
	const T3 = 'xasa-index-menus';
	const T4 = 'uni-id-users';
	const Fields = 'category_id,menu_id,title,content,article_status,last_modify_date,user_id';
	
	
	//require('@/js_sdk/quill-delta-converter/index.js')

	export default {

		data() {
			return {
				id: '',
				queryWhere: '',
				collectionList: [],
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				},
				options: {
					// 将scheme enum 属性静态数据中的value转成text
					...enumConverter
				}
			}
		},
		onLoad(e) {
			//console.log(this.$u.date(17890088776,'yyyy/mm/dd'));
			this.id = e.id;
			if (this.id) {
				this.queryWhere = '_id=="' + this.id + '"';
				this.collectionList=[
					db.collection(T1).where(this.queryWhere).getTemp(),
					db.collection(T2).getTemp(),
					db.collection(T3).field('menu_id,name,url').getTemp(),
					db.collection(T4).field('nickname,_id').getTemp()
				];
			}
		},
		onReady() {
			if (this.id){
				this.$refs.DeltaUdb.loadData({clear: true})
			}
		},
		methods: {
			delta2html(deltaData) {
				const converter = new DeltaConverter();
				let html=converter.toHtml(deltaData);
				return html
			},
			handleUpdate() {
				// 打开修改页面
				uni.navigateTo({
					url: './edit?id=' + this.id,
					events: {
						// 监听修改页面成功修改数据后, 刷新当前页面数据
						refreshData: () => {
							this.$refs.DeltaUdb.loadData({
								clear: true
							})
						}
					}
				})
			},
			handleDelete() {
				this.$refs.DeltaUdb.remove(this.id, {
					success: () => {
						// 删除数据成功后跳转到list页面
						uni.navigateTo({
							url: './list'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20px;
		line-height: 2em;
	}

	.art-title {
		color: $u-primary;
	}

	.art-content {
		color: $u-content-color;
		/* text-indent: 2em; */
		text-align: justify;
		text-align-last: left;
		ol {
			padding: .5em 0 .5em 3em;
			text-indent: 0em;
		}
	}
	.date_r {
		display: flex;
		justify-content:flex-end;
		margin-top: 10px;
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
	}
	.btns {
		margin-top: 10px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}
	.btns button {
		flex: 1;
	}
	.btn-delete {
		margin-left: 10px;
	}
</style>